<template>
  <div class="wangluoqingqiu">
      <h2>网络请求组件</h2>
      <fieldset>
          <legend><h2>登录</h2></legend>
          <input type="text" placeholder="用户名" v-model="username">
          <input type="text" placeholder="密码" v-model="password">
          <button @click="loginGet">登录get</button>
          <button @click="loginPost">登录post</button>
      </fieldset>
  </div>
</template>

<script>
    import qs from 'qs';
    export default {
        name:'WangLuoQingQiu',
        data(){
            return {
                username:'',
                password:''
            }
        },
        methods:{
            loginGet(){
                this.axios.get("/api1/axiosGet",{
                    params:{username:this.username,password:this.password}
                }).then(response=>{
                    //注意，请求成功之后的回调里的response，不是直接的结果，结果存放在该对象的data字段里
                    console.log(response);
                }).catch(error=>{
                    console.log(error)
                })
            },
            loginPost(){
                /* 
                    注意：
                        1、axios在发起post请求时，其默认的数据格式为json数据类型
                        2、如果想要将post传递的数据格式修改成非json格式，如键值对，直接将传入的参数对象通过qs模块处理成键值对即可，我们需要qs模块的帮助
                */
            /*  this.axios.post("http://127.0.0.1:5678/axiosPost",
                    {username:this.username,password:this.password}
                ).then(response=>{
                    //注意，请求成功之后的回调里的response，不是直接的结果，结果存放在该对象的data字段里
                    console.log(response.data);
                }).catch(error=>{
                    console.log(error)
                }) */
                this.axios.post("/api1/axiosPost",
                    qs.stringify({username:this.username,password:this.password})
                ).then(response=>{
                    //注意，请求成功之后的回调里的response，不是直接的结果，结果存放在该对象的data字段里
                    console.log(response);
                }).catch(error=>{
                    console.log(error)
                })
            },
        },
        created() {
          this.$axiosPost("/login",qs.stringify({
                username:"heixia",password:"123456",drip:"10.10.2.4"
              })
          ).then(response=>{
            console.log(response);
          }).catch(error=>{
            console.log(error);
          })
        }
    }


    /* 
        vue-cli项目 在开发阶段，如果需要发起网络请求，绝大部分情况下会出现跨域问题
        解决办法：想办法让当前我们的vue-cli项目在发起请求时，与服务器同源---我们要通过“请求代理”来实现
        “请求代理的实现步骤”
        1、在当前的项目的根目录里，新建一个vue.config.js文件
        2、通过devServe字段设置请求的转发，具体详情代码参见vue.config.js文件
        3、只要vue.config.js文件修改了，都要重启项目

        注意事项：
        1、如果只需要设置一个代理地址，发起请求时，url地址注意写相对路径（即去掉原有的域名+端口，只保留路由地址）
        2、如果需要设置多个代理地址，首先在配置proxy字段时，需要人为通过ket值区分不同的代理地址；在发起请求时，url地址注意写相对路径（即去掉原有的域名+端口，写成/key/路由地址）
        3、为了保证路由与服务器保持一致，需要设置pathRewrite字段，保证请求真正发起时，去掉key，保证路由的正确性
    */
</script>

<style scoped>
    .wangluoqingqiu{
        width: 100%;
        height: 70%;
        background-color: rgb(42, 165, 63);
    }
</style>